<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Fixed Table Header</title>
    <script type="text/javascript" src="../../../plugins/jquery-1.4.4.min.js"></script>
    <style type="text/css">
        #searchDiv {
            border: solid 0 #ccc;
            width: 632px;
            height: 310px;
            overflow-y: scroll;
        }

        #searchTable {
            border-collapse: collapse;
            width: 614px;
        }

        #searchTable th, #searchTable td {
            padding: 3px;
            border: solid 2px #ccc;
        }
    </style>
</head>
<body style="background-color: #fff;">
<div id="searchDiv">
    <table id="searchTable">
        <tr style="background-color: #eaeaea;">
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
            <th>Column5</th>
            <th>Column6</th>
        </tr>
    </table>
</div>
<script type="text/javascript">
    $(function () {
        var lineTrs = '';
        for (var i = 1; i <= 20; i++) {
            lineTrs += '<tr><td>Value' + i + '1</td><td>Value' + i + '2</td><td>Value' + i + '3</td><td>Value' + i + '4</td><td>Value' + i + '5</td><td>Value' + i + '6</td></tr>'
        }
        $('#searchTable').append(lineTrs);

        $('#searchTable tr:eq(0)').clone().prependTo("#searchTable");
        $('#searchTable tr:eq(0)').css({'z-index': 10, position: 'fixed'}).width($('#searchTable tr:eq(1)').width());

        var thObjs = $('#searchTable tr:eq(1) th');
        thObjs.each(function (i) {
            var thObj = $(this);
            $('#searchTable tr:eq(0) th:eq(' + i + ')').height(thObj.height()).width(thObj.width() + getWidth(thObj.css('border-left-width')));
        });
    });

    function getWidth(widthObj) {
        var widthStr = $.trim(widthObj).toLowerCase().replace('px', '');
        var widthInt = parseInt(widthStr);
        if (isNaN(widthInt)) {
            return 0;
        } else {
            return widthInt;
        }
    }
</script>
</body>
</html>